<template>
    <div class="text-center">
        <el-page-header :icon="ArrowLeft" title="返回" class="mb-6" @back="goBack">
            <template #content>
                <span>{{state.title}}</span>
            </template>
            <template #extra>
                <div class="">
                    <el-button @click="download(state.url)">下载</el-button>
                    <el-button @click="handleDelete(state.fileId)" type="danger" class="ml-2">删除</el-button>
                </div>
            </template>
        </el-page-header>

        <md-editor v-if="state.type == 'md'" v-model="state.md" />

        <!-- 预览Office -->
        <div v-if="judgeOffice(state.type)">
            <el-button @click="previewOffice(state.url)">预览</el-button>
            <el-dialog width="90%" v-model="state.dialogTableVisible" title="Office 预览">
                <iframe class="w-1/1 h-480px" :src="state.officeUrl"></iframe>
            </el-dialog>
        </div>

        <!-- 展示图片 -->
        <el-image v-if="judgePic(state.type)" :src="state.url">
            <template #error>
                <div class="image-slot">
                    <el-icon>
                        <icon-picture />
                    </el-icon>
                </div>
            </template>
        </el-image>

        <!-- 下载 -->
        <p v-if="state.isSupport" class="text-gray-500 text-sm">抱歉，该文件类型暂不支持在线浏览，<em @click="download(state.url)"
                class="text-blue-600 cursor-pointer">点击下载</em></p>

        <p class="text-gray-500">{{state.title}}</p>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { Picture as IconPicture, ArrowLeft } from '@element-plus/icons-vue'
import { httpFileDetail, httpFileMd, httpFileDelete } from '@/api/file'
import { ElMessage, ElMessageBox } from 'element-plus'
import { baseURL } from '@/config/index'
import useCurrentInstance from "@/utils/useCurrentInstance"
const { proxy } = useCurrentInstance()


const state = reactive({
    fileId: null,
    url: '',
    title: '',
    type: '',
    md: '',
    isSupport: true,
    dialogTableVisible: false,
    officeUrl: ''
})


// 判断判断是否图片
const judgePic = (type: string) => {
    const strFilter = ['jpg', 'jpeg', 'png', 'svg', 'gif']
    if (strFilter.indexOf(type) > -1) {
        state.isSupport = false
        return true
    }
}

// 获取文件列表
const getFiles = async (id: number) => {
    const res: any = await httpFileDetail({id})
    const { code, data } = res
    if (code === 200) {
        state.type = data.type
        state.url = baseURL + data.url
        state.title = data.title
        state.fileId = data.id
    }

    // 获取md内容
    if (res.data.type == 'md') {
        const md: any = await httpFileMd(res.data.url)
        state.md = md
        state.isSupport = false
    }
}

// 判断判断是否Office
const judgeOffice = (type: string) => {
    const strFilter = ['docx', 'pptx', 'xlsx', 'doc', 'xls', 'ppt']
    if (strFilter.indexOf(type) > -1) {
        state.isSupport = false
        return true
    }
}
// 预览Office
const previewOffice = (routeUrl:string) => {
    // let routeUrl = 'https://file.zengweihao.cn/upload/2022-09-27/1664244153720.docx'
    // let url = encodeURIComponent('https://file.zengweihao.cn/upload/2022-09-27/1664244153720.docx')
    let url = encodeURIComponent(routeUrl)
    state.officeUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + url
    state.dialogTableVisible = true
}


// 根据文件路径下载文件
const download = (url: string) => {
    fetch(url).then(res => res.blob().then(blob => {
        const a = document.createElement('a')
        const url = window.URL.createObjectURL(blob)
        const filename = state.title
        a.href = url
        a.download = filename
        a.click()
        window.URL.revokeObjectURL(url)
    }))
}

// 删除文件
const handleDelete = (id: number | any,) => {
    ElMessageBox.confirm('是否删除该文件', 'Title', {}).then(() => {
        httpFileDelete({
            id
        }).then((res: any) => {
            if (res.code === 200) {
                ElMessage.success('删除成功')
                proxy.$router.go(-1)
            }
        })
    }).catch(() => {
        console.log('取消')
    })
}

const goBack = () => {
    proxy.$router.go(-1)
}

onMounted(() => {
    getFiles(proxy.$route.params.id)
})
</script>

<style scoped>

</style>